import React from 'react';
import { Form, Input, Modal, Button } from 'antd';
import PropTypes from 'prop-types';

const FormItem = Form.Item;

@Form.create()
class CreateJobForm extends React.Component {
  static propTypes = {
    form: PropTypes.object.isRequired,
    visible: PropTypes.bool.isRequired,
    handleCancel: PropTypes.func.isRequired,
    handleSubmit: PropTypes.func.isRequired,
  }

  _handleSubmit = () => {
    const { handleSubmit, handleCancel, form: { validateFieldsAndScroll, resetFields } } = this.props;
    validateFieldsAndScroll((err, values) => {
      // console.log(values);
      if (!err) {
        // console.log('Received values of form: ', values);
        handleSubmit(values);
        resetFields();
        handleCancel();
      }
    });
  }

  render () {
    const {
      visible,
      form: {
        getFieldDecorator,
      },
      handleCancel,
    } = this.props;

    return (
      <Form>
        <Modal
          title={'新增职位'}
          visible={visible}
          onOk={this._handleSubmit}
          onCancel={handleCancel}
          footer={
            [
              <Button key="cancel" onClick={handleCancel}>取消</Button>,
              <Button key="submit" type="primary" onClick={this._handleSubmit}>提交</Button>,
            ]
          }
        >
          <FormItem
            label="职位名称"
          >
            {
              getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入职位名称', whitespace: true }],
              })(<Input />)
            }
          </FormItem>
        </Modal>
        
      </Form>
    );
  }
}

export default CreateJobForm;
